React Native Video একটি জনপ্রিয় লাইব্রেরি যা React Native অ্যাপ্লিকেশনে ভিডিও প্লেব্যাক ফিচার যোগ করতে ব্যবহৃত হয়। এটি ভিডিও স্ট্রিমিং, ভিডিও প্লেব্যাক, এবং কাস্টম কন্ট্রোলার যোগ করার জন্য অত্যন্ত কার্যকরী।
React Native Video লাইব্রেরি ব্যবহার করে আপনি ভিডিও ফাইলগুলি প্লে, পজ, স্কিপ এবং বিভিন্ন প্লে কন্ট্রোল কার্যক্রম সম্পাদন করতে পারেন। এই লাইব্রেরি বিভিন্ন ফিচার সাপোর্ট করে, যেমন fullscreen, auto-play, loop, controls, seek ইত্যাদি।
React Native Video ইনস্টলেশন
প্রথমে, React Native Video ইনস্টল করতে হবে:
npm install react-native-videoঅথবা,
yarn add react-native-videoPost-installation steps: React Native Video লাইব্রেরি ব্যবহারের জন্য কিছু নির্দিষ্ট configuration প্রয়োজন হতে পারে, যেমন Android এবং iOS প্ল্যাটফর্মের জন্য নির্দিষ্ট সেটআপ। আপনি এই সেটআপ গুলি React Native Video Documentation থেকে জানতে পারবেন।
React Native Video ব্যবহার
এখানে React Native Video দিয়ে ভিডিও প্লেব্যাক করার একটি সাধারণ উদাহরণ দেওয়া হলো:
উদাহরণ: ভিডিও প্লেব্যাক
import React from 'react';
import { View, StyleSheet } from 'react-native';
import Video from 'react-native-video';
const App = () => {
return (
<View style={styles.container}>
<Video
source={{uri: 'https://www.w3schools.com/html/mov_bbb.mp4'}}
ref={(ref) => {
this.player = ref;
}}
onBuffer={this.onBuffer}
onError={this.videoError}
style={styles.backgroundVideo}
controls={true} // Show video controls
resizeMode="contain" // Resize mode
repeat={true} // Loop the video
onEnd={() => console.log('Video Ended')} // Event when video ends
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#000',
},
backgroundVideo: {
width: '100%',
height: '100%',
},
});
export default App;ব্যাখ্যা:
source: এখানেsourceপ্রপ ব্যবহার করা হয়েছে ভিডিও ফাইলের লোকেশন বা URL সেট করার জন্য। আপনি local video files বা remote URLs ব্যবহার করতে পারেন।controls: এই প্রপটিtrueদিলে ভিডিও কন্ট্রোল (প্লে, পজ, স্কিপ) দেখাবে। আপনি চাইলে নিজস্ব কন্ট্রোলও তৈরি করতে পারেন।resizeMode: ভিডিও স্কেল করার জন্যresizeModeব্যবহার করতে পারেন। এখানে"contain"ব্যবহার করা হয়েছে, যা ভিডিওর পুরোটা দেখাবে স্ক্রীনে সামঞ্জস্য রেখে।repeat: ভিডিওটি যদি শেষ হয়ে যায়, তাহলে এটি পুনরায় শুরু হবে। এর মানtrueহলে ভিডিও লুপ হবে।onEnd: ভিডিও শেষ হলে এটি একটি ইভেন্ট ট্রিগার করবে, যেখানে আপনি প্রয়োজনীয় কাজ করতে পারেন, যেমন লোগিং বা অন্য কোনো কার্যক্রম।
অতিরিক্ত ফিচারসমূহ:
- Auto Play:
আপনি যদি ভিডিওটি auto-play করতে চান, তবেpaused={false}প্রপটি ব্যবহার করতে পারেন।
<Video
source={{uri: 'https://www.w3schools.com/html/mov_bbb.mp4'}}
paused={false} // Auto play the video
style={styles.backgroundVideo}
/>- Video Controls Customization:
যদি আপনি custom video controls চান, তবেcontrolsপ্রপটিfalseসেট করে নিজস্ব কন্ট্রোল তৈরি করতে পারবেন। উদাহরণস্বরূপ, প্লে/পজ বাটন এবং ভলিউম কন্ট্রোল যোগ করতে পারেন। - Seek/Progress:
ভিডিওর সময়ের সাথে সাথে প্রগ্রেস ট্র্যাক করার জন্যonProgressএবংseekফিচার ব্যবহার করা যেতে পারে।
<Video
source={{uri: 'https://www.w3schools.com/html/mov_bbb.mp4'}}
onProgress={(data) => console.log(data)} // Shows progress
onEnd={() => console.log('Video Ended')}
style={styles.backgroundVideo}
/>- Fullscreen:
React Native Video দিয়ে আপনি ভিডিওটি পূর্ণ স্ক্রীনে দেখতে পারেন। আপনিresizeModeএবংonFullscreenPlayerWillPresentইভেন্ট হ্যান্ডলার ব্যবহার করে এই ফিচারটি অ্যাক্টিভেট করতে পারেন।
<Video
source={{uri: 'https://www.w3schools.com/html/mov_bbb.mp4'}}
resizeMode="cover"
style={styles.backgroundVideo}
onFullscreenPlayerWillPresent={() => console.log('Fullscreen Mode Activated')}
/>সারাংশ
React Native Video লাইব্রেরি ভিডিও প্লেব্যাক ফিচার যুক্ত করার জন্য একটি শক্তিশালী টুল। এটি remote, local ভিডিও প্লেব্যাক, controls, auto-play, looping, seek, এবং fullscreen সহ নানা ধরনের ফিচার সাপোর্ট করে। আপনি ভিডিও প্লেব্যাকের অভিজ্ঞতা কাস্টমাইজ করতে চাইলে এটি আপনাকে অনেক স্বাধীনতা প্রদান করে।
Read more
